<template>
  <div :id="id" :style="{width: width_lenght, height: height_length}" />
</template>

<script>
import * as echarts from 'echarts/lib/echarts'
// 引入折线图。
import 'echarts/lib/chart/line'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
export default {
  name: 'Procurement',
  props: {
    id: {
      type: String,
      default: 'myChart'
    },
    widths: {
      type: String,
      default: '100%'
    },
    heights: {
      type: String,
      default: '300px'
    },
    legendData: {
      type: Object,
      default: () => {
        return { data: ['采购单', '采购总金额', '采购总量'] }
      }
    },
    xAxisData: {
      type: Array,
      default: () => {
        return ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      }
    },
    seriesData: {
      type: Array,
      default: () => {
        return [
          {
            name: '采购单',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '采购总金额',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '采购总量',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
          }
        ]
      }
    }
  },
  data() {
    return {

    }
  },
  computed: {
    width_lenght: function() {
      return this.widths
    },
    height_length: function() {
      return this.heights
    }
  },
  watch: {
    legendData: function(val) {
      this.init()
    },
    xAxisData: function(val) {
      this.init()
    },
    seriesData: function(val) {
      this.init()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    init() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById(this.id))
      // 绘制图表
      myChart.setOption({
        title: { text: '' },
        tooltip: { trigger: 'axis' },
        legend: this.legendData,
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: this.seriesData
      })
    }

  }
}
</script>

